<template>
  <div class="top-container" :style="topNavStyle">
    <router-link to="/">
      <img class="logo obviously-beat" src="@/assets/logo.svg" alt="" />
    </router-link>
    <div>
      <el-input
        v-model="inputContent"
        placeholder="请输入内容"
        style="width: 400px"
        @keyup.enter.native="inputSearch"
      >
        <template #prefix>
          <el-icon @click="inputSearch" class="el-imput__icon"><Search/></el-icon>
        </template>
      </el-input>
    </div>
    <div class="top-nav__right">
      <!-- 头像       -->
      <div class="my-avatar userInfo__hover" @click="clickAvatar">

        <el-popover
          placement="bottom"
          :disabled="isLogin()"
          :width="180"
          title="立即登录"
          content="登录可享受更多权限"
          trigger="hover"
        >
          <template #reference>
            <el-avatar
              class="link obviously-beat"
              style="box-shadow: 0 0 5px black"
              :src="commonApi.getHeadshot(store().userInfo.headshot)"
            >
              <img src="@/assets/empty.png" alt="" />
            </el-avatar>
          </template>
        </el-popover>
        <div v-if="isLogin()" class="hidden-box">
          <div style="height: 20px"></div>
          <div>
            <div class="top-nav__user-info">
              <h3 class="link">
                {{ userName(store().userInfo.name, store().userInfo.id) }}
              </h3>
            </div>
            <div class="link" @click.stop="dialogBox.logout = true">
              退出登录
              <el-icon>
                <SwitchButton />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <!-- 消息图标 -->
      <div @click="dialogBox.message = true" class="el-icon userInfo__hover">
        <el-badge is-dot :hidden="!topNavIcon.message" class="item">
          <el-icon size="25" color="#333333" class="obviously-beat link">
            <Message />
          </el-icon>
        </el-badge>
      </div>
      <div @click="dialogBox.dynamic = true" class="el-icon userInfo__hover">
        <el-badge is-dot :hidden="!topNavIcon.dynamic" class="item">
          <el-icon size="25" color="#333333" class="obviously-beat link">
            <Orange />
          </el-icon>
        </el-badge>
      </div>
      <div class="userInfo__hover">
        <el-button type="primary" @click="router.toUpload()">
          投稿
          <el-icon>
            <Upload />
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>

  <!-- 登录弹窗 -->
  <el-dialog
    class="animate__animated animate__bounceIn"
    :show-close="false"
    v-model="store().showLoginBox"
    width="600px"
  >
    <LoginPopover />
  </el-dialog>

  <!-- 登出弹窗 -->
  <el-dialog
    v-model="dialogBox.logout"
    title="确认登出吗?"
    width="400px"
    destroy-on-close
    center
    align-center
  >
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogBox.logout = false" type="primary"
          >取消</el-button
        >
        <el-button @click="logout">退出</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 消息抽屉 -->
  <el-drawer v-model="dialogBox.message" :with-header="false" size="600px">
    <MessageLayout></MessageLayout>
  </el-drawer>

  <!-- 动态抽屉 -->
  <el-drawer v-model="dialogBox.dynamic" :with-header="false" size="500px">
    <DynamicLayOut></DynamicLayOut>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted } from "vue";
import { isNull, isLogin, userName, removeToken, errorNotify } from "@/utils/common";
import {
  Search,
  Message,
  Orange,
  Upload,
  SwitchButton,
} from "@element-plus/icons-vue";
import LoginPopover from "@/components/LoginDialog.vue";
import MessageLayout from "@/components/MessageLayout.vue";
import DynamicLayOut from "@/components/DynamicLayOut.vue";
import userApi from "@/api/user";
import commonApi from "@/api/common";
import router from "@/router/router";
import store from "@/store/store";

const topNavStyle = ref({}); // topNav样式
const inputContent = ref("")
const dialogBox = ref({
  logout: false,
  message: false,
  dynamic: false,
});
// 顶部图标：图标名：是否显示小红点
const topNavIcon = ref({
  message: false,
  dynamic: false,
});
// 监听用户信息的变化，是否展示小红点
const watchLoginUser = watch(
  () => store().userInfo,
  async (newV) => {
    topNavIcon.value.message = newV.newMessage;
    topNavIcon.value.dynamic = newV.newDynamic;
  },
  { immediate: true }
);
// 点击用户头像事件，用户未登录则弹出登录页面，已登录则跳转到用户信息
const clickAvatar = () => {
  if (isLogin()) {
    router.toHome(store().userInfo.id);
  } else {
    store().setLoginBox(true);
  }
};

//
const inputSearch = () => {
  if (inputContent.value.trim() == "") {
    errorNotify("请输入搜索内容");
    return;
  } 

  router.toSearch(inputContent.value);
}

// 登出
const logout = () => {
  removeToken();
  location.reload();
};

onUnmounted(() => {
  watchLoginUser();
});
</script>

<style lang="scss" scoped>
@import "./top_nav";
</style>
